<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload</title>
</head>
<body>
    <div>
        <input type="file" name='file' onchange='uploadFile(this);'>
    </div>
    <div>
        <pre id='ret-content'></pre>
    </div>

    <script>
        // 通过浏览器访问http://localhost:3456/upload是向服务器端发起GET请求
        // upload.js中GET对应的代码执行，response可写流是写入到浏览器(前端)

        // 当选择文件上传时，触发下面函数执行，该函数向现在正访问的服务器地址发送POST请求，
        // upload.js中POST对应的代码执行，POST请求响应的结果response返回给fetch的数据为bodyData，.then中的res就是response返回的数据
        // res.text()将res转成文本格式，通过document.getElementById('ret-content').innerHTML=text;将返回的经过处理的数据呈现在页面上
        
        function uploadFile(t){  //这个函数是发送了一个POST请求
            if(t.files.length<=0) return;   //files是一个数组

            let fm=new FormData();  //创建一个form表单
            fm.append('image',t.files[0]);  //向fm表单里添加一个name值为image,value值为t.files[0]的input标签

            fetch('/upload',{ 
                method:'POST',
                body:fm
            })
            .then(res=>{
                return res.text();
            })
            .then(text=>{
                let d=document.getElementById('ret-content');
                d.innerHTML=`<img src="/image/${text}" `
                            +`style="width:80%;height:auto;" />`;
            })
        }
    </script>
</body>
</html>